<!-- 背景线 -->
<div
  class="lv-slider-content"
  [class.lv-slider-content-horizontal]="lvDirection !== 'vertical'"
  [class.lv-slider-content-vertical]="lvDirection === 'vertical'"
  ngDefaultControl
>
  <div
    class="lv-slider-rail"
    [class.lv-slider-rail-vertical]="lvDirection === 'vertical'"
    [class.lv-slider-rail-disable]="lvDisabled"
    (click)="onBarClick($event)"
    (mousemove)="moveSlider($event)"
    (mouseenter)="enterSlider($event)"
    (mouseleave)="leaveSlider()"
  >
    <!-- 隐藏的DOM,用于显示hover到slider上tooltip -->
    <lv-tooltip
      #sliderTooltip
      class="slider-tooltip"
      [ngStyle]="{
        left: lvDirection !== 'vertical' && !lvReverse ? SliderTooltipsValue + '%' : null,
        bottom: lvDirection === 'vertical' && !lvReverse ? SliderTooltipsValue + '%' : null,
        right: lvDirection !== 'vertical' && lvReverse ? SliderTooltipsValue + '%' : null,
        top: lvDirection === 'vertical' && lvReverse ? SliderTooltipsValue + '%' : null
      }"
      [lvContent]="sliderTipTemplate"
      [lvClassName]="'lv-slider-tooltip-offset'"
      lvTrigger="customize"
      [lvTheme]="lvTheme"
      [(lvVisible)]="sliderTooltipVisible"
      [lvArrowPointAtCenter]="true"
    ></lv-tooltip>
    <!-- [rangeDivision]单元划分 -->
    <div class="lv-slider-points">
      <span
        class="lv-slider-cell"
        *ngFor="let cell of cells"
        [ngStyle]="cell.style"
        [class.lv-slider-cell-vertical]="lvDirection === 'vertical'"
      ></span>
    </div>
    <!-- [lines] -->
    <div class="lv-slider-range-lines">
      <span
        *ngFor="let line of lvLines"
        [ngStyle]="line.style"
        [class.lv-slider-range-lines-horizontal]="lvDirection !== 'vertical'"
        [class.lv-slider-range-lines-vertical]="lvDirection === 'vertical'"
      ></span>
    </div>
    <!-- [points] -->
    <div class="lv-slider-range-points">
      <div *ngFor="let point of lvPoints" (mouseleave)="hideToolTip()" (click)="onPointClick($event, point)">
        <span
          class="lv-mark-point"
          [ngStyle]="point.pointStyle"
          [class.lv-mark-point-horizontal]="lvDirection !== 'vertical'"
          [class.lv-mark-point-vertical]="lvDirection === 'vertical'"
          [ngClass]="{ 'lv-mark-point-range-select': selectMarkPoint(point) }"
        ></span>

        <span
          class="lv-mark-text"
          [ngStyle]="point.textStyle"
          [class.lv-mark-text-horizontal]="lvDirection !== 'vertical'"
          [class.lv-mark-text-vertical]="lvDirection === 'vertical'"
        >
          {{ point.label }}
        </span>
      </div>
    </div>
    <!-- 已选区域滑条的显示 -->
    <div
      class="lv-slider-track"
      *ngIf="lvTrackVisible"
      [class.lv-slider-track-horizontal]="lvDirection !== 'vertical'"
      [class.lv-slider-track-vertical]="lvDirection === 'vertical'"
      [class.lv-slider-track-disable]="lvDisabled"
      [ngStyle]="{
        width:
          lvDirection !== 'vertical'
            ? lvRange
              ? handleValues[1] - handleValues[0] + '%'
              : handleValues[0] + '%'
            : null,
        height:
          lvDirection === 'vertical'
            ? lvRange
              ? handleValues[1] - handleValues[0] + '%'
              : handleValues[0] + '%'
            : null,
        left: lvDirection !== 'vertical' && !lvReverse && lvRange ? handleValues[0] + '%' : null,
        bottom: lvDirection === 'vertical' && !lvReverse && lvRange ? handleValues[0] + '%' : null,
        right: lvDirection !== 'vertical' && lvReverse ? (lvRange ? handleValues[0] + '%' : '0px') : null,
        top: lvDirection === 'vertical' && lvReverse ? (lvRange ? handleValues[0] + '%' : '0px') : null
      }"
    ></div>
  </div>
  <!-- 滑块 -->
  <!-- 单滑块 或 双滑块的第一个 -->
  <div
    #sliderHandleStart="lvTooltip"
    class="lv-slider-handle"
    [class.lv-slider-handle-horizontal]="lvDirection !== 'vertical'"
    [class.lv-slider-handle-vertical]="lvDirection === 'vertical'"
    [attr.tabindex]="tabindex"
    #tooltip="lvTooltip"
    [lv-tooltip]="contentTemplate"
    lvTooltipTrigger="customize"
    [lvTooltipTheme]="lvTheme"
    [lvTooltipClassName]="'lv-slider-tooltip-offset'"
    [(lvTooltipVisible)]="lvTooltipVisibleDefault"
    (keydown)="onHandleKeydown($event, 0)"
    (mousedown)="onMouseDown($event, 0)"
    (mouseenter)="enterHandle($event, sliderHandleStart)"
    (mouseleave)="leaveHandle($event, sliderHandleStart)"
    [ngStyle]="{
      left: lvDirection !== 'vertical' && !lvReverse ? handleValues[0] + '%' : null,
      bottom: lvDirection === 'vertical' && !lvReverse ? handleValues[0] + '%' : null,
      right: lvDirection !== 'vertical' && lvReverse ? handleValues[0] + '%' : null,
      top: lvDirection === 'vertical' && lvReverse ? handleValues[0] + '%' : null,
      'border-color': !lvDisabled && handleColor
    }"
    [class.lv-slider-handle-disable]="lvDisabled"
    [class.dragging]="dragging || sliderDragType.left"
  >
    <span class="lv-handle-icon" [ngStyle]="{ color: handleColor }"></span>
    <ng-template #contentTemplate>
      <div
        [ngSwitch]="true"
        [class.lv-tooltip-text-horizontal]="lvDirection !== 'vertical'"
        [class.lv-tooltip-text-vertical]="lvDirection === 'vertical'"
      >
        <ng-container *ngSwitchCase="typeUtils.isTemplateRef(lvTooltip)">
          <ng-container *ngTemplateOutlet="lvTooltip; context: { $implicit: values[0] }"></ng-container>
        </ng-container>
        <ng-container *ngSwitchDefault>{{ values[0] }}</ng-container>
      </div>
    </ng-template>
  </div>
  <!-- 双滑块的第二个 -->
  <div
    *ngIf="lvRange"
    #sliderHandleEnd="lvTooltip"
    class="lv-slider-handle"
    [class.lv-slider-handle-horizontal]="lvDirection !== 'vertical'"
    [class.lv-slider-handle-vertical]="lvDirection === 'vertical'"
    [attr.tabindex]="tabindex"
    #tooltip="lvTooltip"
    [lv-tooltip]="contentTemplate"
    lvTooltipTrigger="customize"
    [lvTooltipTheme]="lvTheme"
    [lvTooltipClassName]="'lv-slider-tooltip-offset'"
    [(lvTooltipVisible)]="lvTooltipVisibleDefault"
    (keydown)="onHandleKeydown($event, 1)"
    (mousedown)="onMouseDown($event, 1)"
    (mouseenter)="enterHandle($event, sliderHandleEnd)"
    (mouseleave)="leaveHandle($event, sliderHandleEnd)"
    [ngStyle]="{
      left: lvDirection !== 'vertical' && !lvReverse ? handleValues[1] + '%' : null,
      bottom: lvDirection === 'vertical' && !lvReverse ? handleValues[1] + '%' : null,
      right: lvDirection !== 'vertical' && lvReverse ? handleValues[1] + '%' : null,
      top: lvDirection === 'vertical' && lvReverse ? handleValues[1] + '%' : null,
      'border-color': !lvDisabled && handleRightColor
    }"
    [class.lv-slider-handle-disable]="lvDisabled"
    [class.dragging]="sliderDragType.right"
  >
    <span class="lv-handle-icon" [ngStyle]="{ color: handleColor }"></span>
    <ng-template #contentTemplate>
      <div
        [ngSwitch]="true"
        [class.lv-tooltip-text-horizontal]="lvDirection !== 'vertical'"
        [class.lv-tooltip-text-vertical]="lvDirection === 'vertical'"
      >
        <ng-container *ngSwitchCase="typeUtils.isTemplateRef(lvTooltip)">
          <ng-container *ngTemplateOutlet="lvTooltip; context: { $implicit: values[1] }"></ng-container>
        </ng-container>
        <ng-container *ngSwitchDefault>{{ values[1] }}</ng-container>
      </div>
    </ng-template>
  </div>
  <ng-template #sliderTipTemplate>
    <div
      [ngSwitch]="true"
      [class.tooltip-text-horizontal]="lvDirection !== 'vertical'"
      [class.tooltip-text-vertical]="lvDirection === 'vertical'"
    >
      <ng-container *ngSwitchCase="typeUtils.isTemplateRef(lvTooltip)">
        <ng-container *ngTemplateOutlet="lvTooltip; context: { $implicit: sliderHoverData }"></ng-container>
      </ng-container>
      <ng-container *ngSwitchDefault>{{ sliderHoverData }}</ng-container>
    </div>
  </ng-template>
</div>
